<template xmlns:float="http://www.w3.org/1999/xhtml">
    <div>
        <a-row :gutter="18" class="oneRow">
            <!--司机头像及基本信息-->
            <a-col :xs="24" :sm="24" :md="8" :xl="8" class="aCol">
                <a-card hoverable class="oneRowAcard">
                    <div class="oneRowAcardDiv1" slot="cover">
                        <div style="float: left">
                            <a-avatar :size="64" icon="user"/>
                            <div style="margin-top: 18px">
                                <div style="margin-bottom: 10px">姓名：{{thisUserInfo.sjUser.userXm}}</div>
                                <div style="margin-bottom: 10px">昵称：{{thisUserInfo.sjUser.userNc}}</div>
                            </div>
                        </div>
                        <div class="oneRowAcardDiv2" slot="cover">
                            <div slot="cover">
                                {{thisUserInfo.sjUser.userJj}}
                            </div>
                        </div>
                    </div>
                    <div class="oneRowAcardDiv3" slot="cover">联系方式：{{thisUserInfo.sjUser.userSjh}}</div>
                </a-card>
            </a-col>
            <!--司机接单情况-->
            <a-col :xs="24" :sm="24" :md="8" :xl="8" class="oneRowTcol">
                <a-card hoverable class="oneRowTcolAcard">
                    <a-row :gutter="10" slot="cover" style="margin: 0">
                        <a-col :xs="12" :sm="12" :md="12" :xl="12" class="oneRowTcolAcard1">
                            <a-card class="oneRowTcolAcard2">
                                <div slot="cover" style="font-size: 18px;width: auto">
                                    <div style="text-align: center;padding-top: 10px">
                                        <div>接单总量</div>
                                        <cite class="oneRowTcolAcard3">{{thisUserInfo.sjJdNum}}</cite>
                                    </div>
                                </div>
                            </a-card>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="12" :xl="12" style="height: 88px;margin-bottom: 8px">
                            <a-card class="oneRowTcolAcard4">
                                <div slot="cover" style="font-size: 18px;width: auto">
                                    <div style="text-align: center;padding-top: 10px">
                                        <div>交易成功量</div>
                                        <cite class="oneRowTcolAcard3">{{thisUserInfo.sjJdNum}}</cite>
                                    </div>
                                </div>
                            </a-card>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="12" :xl="12" style="height: 88px">
                            <a-card class="oneRowTcolAcard5">
                                <div slot="cover" style="font-size: 18px;width: auto">
                                    <div style="text-align: center;padding-top: 10px">
                                        <div>交易失败量</div>
                                        <cite class="oneRowTcolAcard3">{{thisUserInfo.sjJdNum}}</cite>
                                    </div>
                                </div>
                            </a-card>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="12" :xl="12" style="height: 88px">
                            <a-card class="oneRowTcolAcard6">
                                <div slot="cover" style="font-size: 18px; width: auto">
                                    <div style="text-align: center;padding-top: 10px">
                                        <div>接单总量</div>
                                        <cite class="oneRowTcolAcard3">{{thisUserInfo.sjJdNum}}</cite>
                                    </div>
                                </div>
                            </a-card>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
            <!--车辆基本信息-->
            <a-col :xs="24" :sm="24" :md="8" :xl="8" class="aCol">
                <a-card
                        hoverable
                        style="width: 100%;height: 100%;padding: 0">
                    <div style="height: 100%;font-size: 16px;margin: 0;padding: 15px" slot="cover">
                        <table border="1" cellspacing="0" style="width: 100%">
                            <tr class="touch">
                                <td style="padding: 8px;font-weight: bold">注册时间</td>
                                <td style="padding: 8px">2019-9-15</td>
                            </tr>
                            <tr class="touch">
                                <td style="padding: 8px;font-weight: bold">车辆载重</td>
                                <td style="padding: 8px">3T</td>
                            </tr>
                            <tr class="touch">
                                <td style="padding: 8px;font-weight: bold">车辆牌照</td>
                                <td style="padding: 8px">川ST9856</td>
                            </tr>
                            <tr class="touch">
                                <td style="padding: 8px;font-weight: bold">专线及目的地</td>
                                <td style="padding: 8px">S98 长沙专线</td>
                            </tr>
                        </table>
                    </div>
                </a-card>
            </a-col>

        </a-row>
        <!--交易记录等-->
        <a-row :gutter="18" style="height: 938.6px;">
            <!--交易记录-->
            <a-card
                    hoverable
                    style="width: 100%;height: auto" title="交易记录">
                <div style="height: auto" slot="cover">
                    <div style="height: auto">
                        <sj-wljd-table :sjWljdInfoList="thisUserInfo.sjWljdInfoList"></sj-wljd-table>
                    </div>
                </div>
            </a-card>
        </a-row>
    </div>
</template>

<script>
    import SjWljdTable from '@/views/my/single/SjShowModules/SjWljdTable'
    import SjViewer from '@/views/my/single/SjShowModules/SjViewer'
    import ACol from 'ant-design-vue/es/grid/Col'
    import ARow from 'ant-design-vue/es/grid/Row'
    import {getAction} from '@/api/manage'

    export default {
        name: 'SjShow',
        components: {
            ARow,
            ACol,
            SjWljdTable,
            SjViewer
        },
        created() {
            this.thisUserId = this.$route.query.thisUserId;
            console.log(this.thisUserId)
            this.loadData()
        },
        data() {
            return {
                data: "",
                thisUserInfo: "",
                thisUserId: "",
                url: {
                    getOneSjInfo: "/my/sjInfo/getOneSjInfo?sjId="
                }
            }
        },
        methods: {
            loadData() {
                this.thisUserId = this.$route.query.thisUserId;
                var getOneSjUrl = this.url.getOneSjInfo + this.thisUserId;
                console.log(getOneSjUrl);
                getAction(getOneSjUrl).then((res) => {
                    if (res.success) {
                        console.log('OneSj', res.result);
                        this.thisUserInfo = res.result;
                    }
                })
            }
        }

    }

</script>

<style>
    .touch {
        transition-delay: 0.05s;
    }

    .touch:hover {
        background-color: #a9fafa;
    }

    /*第一行*/
    .oneRow {
        margin-top: 18px;
        height: 200px;
    }

    .oneRowAcard {
        width: 100%;
        height: 100%;
        padding: 18px;
    }

    .oneRowAcardDiv1 {
        height: 140px;
        width: 100%;
    }

    .oneRowAcardDiv2 {
        height: 100%;
        width: 50%;
        float: right;
        background-color: greenyellow;
    }

    .oneRowAcardDiv3 {
        height: 25px;
        margin-bottom: 15px;
        float: left;
    }

    .oneRowTcol {
        height: 100%;
        margin-bottom: 5px;
    }

    .oneRowTcolAcard {
        width: 100%;
        height: 100%;
        padding: 0;
        padding-top: 8px;
    }

    .oneRowTcolAcard1 {
        height: 88px;
        margin-bottom: 8px;
    }

    .oneRowTcolAcard2 {
        height: 100%;
        font-size: 18px;
        background-color: #0fffca
    }

    .oneRowTcolAcard3 {
        font-size: 25px;
        color: blue;
        font-weight: bold
    }

    .oneRowTcolAcard4 {
        height: 100%;
        font-size: 18px;
        background-color: #d1aeff
    }

    .oneRowTcolAcard5 {
        height: 100%;
        font-size: 18px;
        background-color: #edff07;
    }

    .oneRowTcolAcard6 {
        height: 100%;
        font-size: 18px;
        background-color: #9bfcff
    }

    /*第二行*/
    .twoRow1 {
        height: 165px;
        margin-left: 0px;
        width: 100%;
    }

    .twoRow2 {
        font-size: 50px;
        text-align: center
    }

    .twoRow3 {
        font-size: 17px;
        text-align: center
    }

    .twoRow4 {
        font-size: 22px;
        margin-top: 8px;
        text-align: center
    }

    /*所有列*/
    .aCol {
        height: 100%;
        margin-bottom: 18px;
    }

    dt {
        margin-bottom: 12px;
    }

    dd {
        margin-bottom: 12px;
    }
</style>

